<template>
  <el-dialog
      :model-value="visible"
      title="预约详情"
      @close="$emit('update:visible', false)"
      width="50%"
      center
  >
    <div v-if="appointment" class="dialog-content">
      <p><strong>编号：</strong>{{ appointment.id }}</p>
      <p><strong>用户名（患者）：</strong>{{ appointment.userName }}</p>
      <p><strong>联系人：</strong>{{ appointment.contactName }}</p>
      <p><strong>联系电话：</strong>{{ appointment.contactPhone }}</p>
      <p><strong>服务类型：</strong>{{ appointment.serviceTypeName }}</p>
      <p><strong>预约时间：</strong>{{ formatTime(appointment.appointmentTime) }}</p>
      <p><strong>状态：</strong>{{ statusText(appointment.status) }}</p>
      <p><strong>总金额：</strong>{{ appointment.totalAmount }} 元</p>
      <p><strong>支付状态：</strong>{{ paymentStatusText(appointment.paymentStatus) }}</p>
      <p><strong>创建时间：</strong>{{ formatTime(appointment.createTime) }}</p>
    </div>

    <div v-else class="loading-container">
      <p>加载中...</p>
    </div>

    <template #footer>
      <el-button @click="$emit('update:visible', false)">关闭</el-button>
    </template>
  </el-dialog>
</template>



<script>
import axios from '@/request/request.js'

export default {
  name: 'AppointmentDetailDialog',
  props: {
    visible: Boolean,
    appointmentId: [String, Number]
  },
  data() {
    return {
      appointment: null
    }
  },
  methods: {
    async fetchAppointment(id) {
      if (!id) return
      try {
        console.log('请求预约详情，ID:', id);
        const res = await axios.get(`/v1/escort/appointments/${id}`, { withCredentials: true });
        console.log('响应数据:', res);
        if (res.data.state === 2000) {
          this.appointment = res.data.data;
          console.log('获取到的预约详情:', this.appointment);
        } else {
          this.$message.error('获取预约信息失败');
          console.error('获取预约信息失败:', res.data.message);
        }
      } catch (error) {
        console.error('请求失败:', error)
        this.$message.error('网络错误')
      }
    },
    formatTime(time) {
      if (!time) return '';
      return new Date(time).toLocaleString();
    },
    statusText(status) {
      return {
        pending: '待处理',
        confirmed: '已确认',
        completed: '已完成',
        cancelled: '已取消',
        rejected: '已拒绝'
      }[status] || status;
    },
    paymentStatusText(paymentStatus) {
      return {
        unpaid: '未支付',
        paid: '已支付',
        refunded: '已退款'
      }[paymentStatus] || paymentStatus;
    }
  },
  watch: {
    visible(newVal) {
      if (newVal && this.appointmentId) {
        this.fetchAppointment(this.appointmentId)
      }
    }
  }
}
</script>


<style scoped>
.dialog-content p {
  margin: 10px 0;
  font-size: 14px;
  color: #666;
}

.loading-container {
  text-align: center;
  padding: 20px;
}
</style>










